<template>
  <div>
    <my-breadcrumb :items="['用户管理', '用户组设置']"/>
    <search :formItems="searchItems"/>
    <div class="add">
      <el-button type="primary" @click="toAdd">添加用户组</el-button>
    </div>
    <el-table :data="groups">
      <el-table-column
        type="index"
        width="55">
      </el-table-column>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="名称"
        prop="name">
      </el-table-column>
      <el-table-column
        label="用户数量"
        prop="num">
      </el-table-column>
      <el-table-column
        label="类型"
        prop="type">
        <template slot-scope="scope">
          {{ scope.row.type === '1' ? '用户' : '商家' }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        prop="id">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="toUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="getUserList(scope.row.id, scope.row.type)">添加用户</el-button>
          <el-button size="mini" type="text" @click="toDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="isAdd ? '新增用户组' : '信息修改'" :visible.sync="showAdd" width="300px">
      <el-form :model="group" label-width="70px" ref="addForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="group.name"/>
        </el-form-item>
        <el-form-item label="类型" prop="type" v-if="isAdd">
          <el-select v-model="group.type">
            <el-option value="1" label="用户"/>
            <el-option value="2" label="商家"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="footer" slot="footer">
        <el-button type="primary" @click="toSubmit">{{ isAdd ? '添加' : '修改' }}</el-button>
        <el-button type="danger" @click="showAdd = false">取消</el-button>
      </div>
    </el-dialog>
    <select-list ref="business" :url="'business/index?placardstatus=1&delflag=0'" :searchItems="businessSearch" :tableItem="businessTableItems" :multiple="multiple" @getMultiple="getBusiness"/>
    <select-list ref="user" :url="'member/index?delflag=0'" :searchItems="userSearch" :tableItem="userTableItems" :multiple="multiple" @getMultiple="getBusiness"/>
  </div>
</template>

<script>
import { deleteRow } from '../../utils/getList'
import CLAZZ from '@/config/classify'
import tableItems from '@/config/tableItems'
import selectList from '@/components/common/selectList'
export default {
  name: 'group',
  data () {
    return {
      searchItems: [
      ], // 检索结构
      businessSearch: [
        {
          label: '商家名称',
          type: 'input',
          key: 'name'
        },
        {
          label: '服装范围',
          type: 'selects',
          key: 'managementid',
          options: CLAZZ.managementid
        },
        {
          label: '等级',
          type: 'select',
          key: 'level',
          options: CLAZZ.level
        }
      ],
      userSearch: [
        {
          label: '用户名称',
          type: 'input',
          key: 'membername'
        },
        {
          label: '手机号',
          type: 'input',
          key: 'phone'
        },
        {
          label: '性别',
          type: 'select',
          key: 'sex',
          options: [{id: '1', name: '男'}, {id: '2', name: '女'}, {id: '3', name: '未知'}, {id: '4', name: '保密'}]
        },
        {
          label: '风格',
          type: 'select',
          key: 'styleid',
          options: CLAZZ.style
        },
        {
          label: '爱好程度',
          type: 'select',
          key: 'degreeid',
          options: CLAZZ.degreeid
        },
        {
          label: '地区',
          type: 'address',
          key: 'address'
        },
        {
          label: '拥有裙子数',
          type: 'input',
          key: 'skirtnum'
        },
        {
          label: '等级',
          type: 'select',
          key: 'level',
          options: [{id: '1', name: '一级'}, {id: '2', name: '二级'}, {id: '3'}]
        }
      ], // 检索结构
      groups: [],
      isAdd: true,
      showAdd: false,
      group: {
        name: '',
        type: '1'
      },
      updateRow: null,
      groupId: '',
      // 添加用户开始
      businessTableItems: tableItems.memberList,
      userTableItems: tableItems.userList,
      multiple: {
        list: []
      }
    }
  },
  methods: {
    getList () {
      this.axios.get('/Organization/index')
        .then(res => {
          if (res.data.status === 1) {
            this.groups = res.data.data.list
          }
        })
    },

    toAdd () {
      this.isAdd = true
      this.showAdd = true
      this.$nextTick(() => {
        this.$refs['addForm'].resetFields()
      })
    },
    toUpdate (row) {
      this.isAdd = false
      this.showAdd = true
      this.updateRow = row
      this.$nextTick(() => {
        Object.keys(this.group).forEach(key => {
          this.group[key] = row[key]
        })
      })
    },
    toSubmit () {
      let url = '/Organization/add'
      let params = {}
      Object.keys(this.group).forEach(key => {
        params[key] = this.group[key]
      })
      if (!this.isAdd) {
        url = '/Organization/edit'
        params.id = this.updateRow.id
      }
      this.axios.post(url, this.qs.stringify(params))
        .then(res => {
          if (res.data.status === '1' || res.data.status === 1) {
            this.$message.success(res.data.msg)
            this.getList()
            this.showAdd = false
          }
        })
    },

    toDelete (id) {
      deleteRow({url: '/Organization/delete', id}, res => {
        if (res.data.status === '1' || res.data.status === 1) {
          this.$message.success(res.data.msg)
          this.getList()
        }
      })
    },

    // 弹出层表格
    getUserList (id, type) {
      this.groupId = id
      this.axios.get('/Organization/getmemberorg', {params: {id}})
        .then(res => {
          if (res.data.status === 1) {
            if (type === '1') {
              this.$refs['user'].reset()
              this.$set(this.multiple, 'list', res.data.data)
              this.$refs['user'].toShow()
            } else if (type === '2') {
              this.$refs['business'].reset()
              this.$set(this.multiple, 'list', res.data.data)
              this.$refs['business'].toShow()
            }
          }
        })
    },
    getBusiness (row) {
      // console.log(row)
      let params = {
        orgid: this.groupId,
        memberarr: []
      }
      row.forEach(item => {
        params.memberarr.push(item.id)
      })
      this.axios.post('/Organization/editmemberorg', this.qs.stringify(params))
        .then(res => {
          if (res.data.status === 1) {
            this.getList()
            this.$message.success(res.data.msg)
          }
        })
    }
  },
  components: {
    selectList
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
